<template>
  <div>
  <a-form ref="formRef" :model="formData" layout="inline">
    <a-form-item label="名称" name="name">
      <a-input v-model:value="formData.name" placeholder="请输入名称"/>
    </a-form-item>
    <a-form-item label="性别" name="sex">
      <a-select style="width:120px;" v-model:value="formData.sex" placeholder="请选择性别">
        <a-select-option v-for="item in sexList" :value="item">{{ item }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" @click="query">查询</a-button>
        <a-button @click="reset">重置</a-button>
      </a-space>
    </a-form-item>
  </a-form>
  <h1> {{ title }}</h1>
  <a-table :columns="columns" :data-source="tableDataSource">
  </a-table>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, watch, computed, onMounted} from 'vue'
import {tableColumn, tableData} from "./demoData.ts"  // 模拟数据

// 表单数据
const formData = reactive({
  name: '',
  sex: ''
})

// 表格数据
const columns = tableColumn;
const tableDataSource:any = ref([])
const title = computed(() => {
  return `共计${tableDataSource.value.length}条`
})

// 性别列表
const sexList:any = ref([])
const getSexList = () => {
  sexList.value = ['男', '女'];
  formData.sex = sexList.value[0]
}


const formRef = ref()

/**
 * 查询
 */
const query = () => {
  // 根据formData过滤数据
  let data = tableData;
  if (formData.name) {
    data = tableData.filter(item => {
      return item.name.includes(formData.name);
    });
  }
  if (formData.sex) {
    data = data.filter(item => {
      return item.sex === formData.sex;
    })
  }
  tableDataSource.value = data;
}

/**
 * 重置
 */
const reset = () => {
  formRef.value.resetFields()
}

onMounted(() => {
  getSexList()
})

// 表单数据变化时，查询
watch(formData, () => {
  query()
})
</script>
<style scoped lang="scss">

</style>
